<template>
	<view v-if="show">
		<view
			:style="'background: linear-gradient(180deg, #FFF0DA 2%, #FEC29D 100%);height:' + systemInfo.screenHeight + 'px;'">
			<u-navbar title="技师入驻" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
			<view class="" style="padding-bottom: 120rpx;">
				<view
					:style="'background: url(' + imgData.settleBg + ') no-repeat;background-size: 100% 100%;height:600rpx'">
				</view>
				<view class="content p-30">
					<view class="desc"
						:style="'background: url(' + imgData.settleDesc + ') no-repeat;background-size: 100% 100%;'">
						<view class="desc-item" v-for="(item,index) in descData">
							<view class="">
								<image :src="item.icon" style="width: 70rpx;height: 70rpx;" mode="widthFix"></image>
							</view>
							<view class="ml-30 small-size">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<navigator url="/pages/settle/video" class="submit">
				<u-button color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)" shape="circle"
					text="开始认证"></u-button>
			</navigator>
		</view>
	</view>
	<view v-else>
		<u-navbar title="技师信息" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<view class="p-30" style="padding-bottom: 190rpx;">
			<view class="">
				<view class="title mb-30">基本信息</view>
				<view class="card p-30">
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							头像
						</view>
						<view>
							<u-avatar :src="info.avatar" size="30"></u-avatar>
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							花名
						</view>
						<view>
							{{info.name}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							年龄（岁）
						</view>
						<view>
							{{info.age}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							身高（cm）
						</view>
						<view>
							{{info.height}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							体重（kg）
						</view>
						<view>
							{{info.weight}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							身材
						</view>
						<view>
							{{info.figure}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							封面图
						</view>
						<view>
							<u-image :showLoading="true" width="80rpx" height="80rpx" mode="widthFix"
								:src="info.image"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="mt-30">
				<view class="title mb-30">项目信息</view>
				<view class="card p-30">
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							服务项目
						</view>
						<view>
							{{}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							主推项目
						</view>
						<view>
							{{}}
						</view>
					</view>
				</view>
			</view>
			<view class="mt-30">
				<view class="title mb-30">联系信息</view>
				<view class="card p-30">
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							联系地址
						</view>
						<view>
							{{info.address}}
						</view>
					</view>
					<u-line margin="30rpx 0" color="#eee"></u-line>
					<view class="flex-row justify-between align-center small-size">
						<view class="label gray-color">
							联系方式
						</view>
						<view>
							{{info.mobile}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="submit">
			<template v-if="info.state != 0">
				<template v-if="info.check_state == 1">
					<u-button shape="circle" text="已认证"></u-button>
				</template>
				<template v-else-if="info.state != 0">
					<u-button shape="circle" text="正常"></u-button>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		hotList,
		staffCheckState
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				show: true,

				info: {}
			}
		},
		computed: {
			descData() {
				return [{
					icon: this.imgData.applys1,
					name: '提高曝光率和接单次数，提高收入',
				}, {
					icon: this.imgData.applys2,
					name: '通过后拥有认证专区的专属曝光通道，享受平台用户预约权益',
				}, {
					icon: this.imgData.applys3,
					name: '平台会给予更多流量扶持，专属置顶位置',
				}]
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				staffCheckState({custom: {
					catch: true,
					toast:false
				}}).then(res => {
					if (res.state == -1) {
						this.show = true;
					} else {
						this.show = false;
						this.info = res
					}
				}).catch(err => {
					this.show = true;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: transparent;
	}

	.desc {
		padding: 80rpx 0;
		height: 650rpx;
		box-sizing: border-box;
	}

	.desc-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: space-between;
		width: 550rpx;
		margin: 30rpx auto;
		background: linear-gradient(90deg, #FFDBAC 0%, #FFE6C9 100%);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: #A11A0E;
		font-weight: 700;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>